<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
    <div id="app">
       {{message}}
       <div style="color:red;">
       {{show}}
       </div>

       <span v-bind:title="message2">
        鼠标悬停几秒钟查看此处动态绑定的提示信息！
      </span>
      <span :style="'color:'+color+';'">能改变颜色的内容
      </span>

        <p v-if="seen">现在你看到我了</p>

    <!-- <ol> 
          <li v-for="todo in todos">
            {{ todo.text }}
          </li>
        </ol>-->

        <ol>
            <li v-for="d in list">
              {{d}}
            </li>
        </ol>

        <p>{{ message }}</p>
        <button v-on:click="reverseMessage">反转消息</button>
      </div>

    <script>
    var app =new Vue({
        el: "#app",
        data:{
            message: "hello!",
            show: "扩展内容",
            message2: '页面加载于 ' + new Date().toLocaleString(),
            color:'red',
            seen: true,//可以用1代表true,用0代表false
            todos: [
              { text: '学习 JavaScript' },
              { text: '学习 Vue' },
              { text: '整个牛项目' }],

              list:['g','h','j','k','l']
        },
        methods: {
           reverseMessage: function () {
              this.message = this.message.split('').reverse().join('')
    }
  }
    });
    </script>
</body>
</html>